<template>
  <header class="mfws">
    <nav class="menu">
      <div>
        <img :src="brandingLogo" />
        <span v-if="env">{{ env }}</span>
      </div>
      <ul>
        <li v-if="mode !== 'search'">
          <router-link to="/">Appointments</router-link>
        </li>
        <li><router-link to="/search">Search</router-link></li>
        <li><router-link to="/about">About</router-link></li>
        <li v-if="username">
          <router-link to="/profile">Profile ({{ username }})</router-link>
        </li>
      </ul>
      <ul>
        <li>
          <router-link to="/logout">Logout</router-link>
        </li>
      </ul>
    </nav>
  </header>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "NavBar",
  computed: {
    ...mapGetters(["brandingLogo", "mode", "currentUser"]),
    env: function() {
      return this.currentUser.env;
    },
    username: function() {
      return this.currentUser.username;
    }
  }
};
</script>

<style scoped>
header {
  --menu-height: 50px;
  --menu-padding-top: 10px;
  --menu-padding-right: 20px;
  --menu-padding-left: 10px;
}

/* NOTE: style taken from older med-enterprise-dash. migrating to flex
   would probably implify things greatly and restore the spirit of mfws */
header.mfws *,
header.mfws:before {
  background-color: var(--brand-colour);
}
header.mfws,
header.mfws:before {
  height: var(--menu-height);
}
header.mfws:before {
  left: 0;
  position: absolute;
  top: 0;
  content: "";
  display: block;
  width: 100%;
  z-index: -10;
}
header.mfws nav div {
  padding: var(--menu-padding-top) var(--menu-padding-right) 0
    var(--menu-padding-left);
  float: left;
}
header.mfws nav div img {
  margin: -5px 0 0 5px;
  padding: 0;
  max-width: 30px;
  max-height: 30px;
}
header.mfws nav div span {
  background-color: red;
  font-weight: 900;
  margin-left: 5px;
  padding: 4px 5px 0 5px;
  text-transform: uppercase;
}
header.mfws nav ul {
  list-style-type: none;
  padding: 0 0 0 var(--menu-padding-left);
}
header.mfws nav ul li {
  display: inline;
  padding: 0 var(--menu-padding-right) 0 0;
  height: var(--menu-height);
}
header.mfws nav ul:nth-child(even) li {
  float: left;
}
header.mfws nav ul:nth-child(odd) li {
  float: right;
}
header.mfws nav ul li a,
header.mfws nav ul li a:active,
header.mfws nav ul li a:visited {
  text-decoration: underline;
  display: block;
  padding: var(--menu-padding-top) 0 0 0;
}
header.mfws nav:after {
  content: "";
  display: block;
  clear: both;
}
</style>
